<template>
  <div>
    <el-button type="warning" @click="goUpload">上传商品</el-button>
    <div class="formBox">
      <el-form ref="form" :model="form" label-width="90px" :inline="true">
        <!-- 这是商品名称 -->
        <el-form-item class="mingcheng" label="商品名称：">
          <el-input v-model="form.goodsName" placeholder="请输入商品名称" size="small"></el-input>
        </el-form-item>
        <!-- 这是商品分类 -->
        <el-form-item class="fenlei" label="商品分类：">
          <el-select v-model="form.goodsRegion" placeholder="请选择商品分类" size="small">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!-- 这是销量 -->
        <el-form-item class="xiaoliang" label="销量：">
          <el-col :span="8">
            <el-date-picker
              size="small"
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="8">
            <el-time-picker
              placeholder="选择时间"
              size="small"
              v-model="form.date2"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <br />&emsp;&emsp;&emsp;&emsp;&emsp;
        <el-form-item class="anniu">
          <el-button type="warning" @click="shaixuan(form)" size="small">筛选</el-button>
          <el-button @click="resetForm" plain type="warning" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 这是切换栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">已上架</el-menu-item>
      <el-menu-item index="2">已下架</el-menu-item>
    </el-menu>
    <!-- 这是功能按钮 -->
    <div class="gongneng" v-show='activeIndex==1'>
      <el-checkbox v-model="checkedAll"></el-checkbox>
      <el-tag type="info">批量删除</el-tag>
      <el-tag type="info">批量下架</el-tag>
      <el-tag type="info">批量设置</el-tag>
    </div>
    <div class="gongneng" v-show='activeIndex==2'>
      <el-checkbox v-model="checkedAll"></el-checkbox>
      <el-tag type="info">批量删除</el-tag>
      <el-tag type="info">批量上架</el-tag>
      <el-tag type="info">批量设置</el-tag>
    </div>
    <!-- 这是渲染路由 -->
    <router-view :activeIndex='activeIndex'></router-view>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      form: {
        goodsName: "",
        goodsRegion: "",
        date1: "",
        date2: "",
      },
      activeIndex: '1',
      checkedAll: false
    };
  },
  created(){

  },
  methods: {
    // 跳转上传页面
    goUpload(){
      this.$router.push({
        path:'/YangPage3'
      })
    },
    // 筛选按钮
    shaixuan(form) {},
    // 重置按钮
    resetForm() {
      this.form.goodsName = "";
      this.form.goodsRegion = "";
      this.form.date1 = "";
      this.form.date2 = "";
    },
    // 点击分栏切换按钮
    handleSelect(key) {
      this.activeIndex=key
      this.$router.push({
        path:'/YangHandler/'+ key
      })
      this.checkedAll=false
    },
  },
};
</script>

<style scoped>
.el-button {
  margin-bottom: 10px;
}
.formBox {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #eee;
}
.mingcheng,
.fenlei {
  width: 300px;
  margin-bottom: 6px;
}
.xiaoliang{
  margin-bottom: 6px;
}
.anniu {
  margin-bottom: 0px;
}
.el-form {
  width: 100%;
}
.el-menu{
  margin-bottom: 10px;
}
.gongneng .el-tag{
  margin-left: 10px;
  background-color: #fff;
}
.gongneng{
  margin-bottom: 10px;
}
</style>